<template>
  <view class="login-page">
    <view class="logo">
      <image
        style="width: 300rpx; height: 300rpx"
        src="/static/images/logo.jpg"
        mode="scaleToFill"
      />
    </view>
    <view class="btn">
      <template v-if="checked.length <= 0">
        <u-button
          text="手机号快捷登录"
          :hairline="false"
          shape="circle"
          color="#428d38"
          throttleTime="2000"
          @click="getPhoneNumberBefore"
        ></u-button>
      </template>
      <template v-else>
        <u-button
          text="手机号快捷登录"
          :hairline="false"
          shape="circle"
          color="#428d38"
          throttleTime="2000"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        ></u-button>
      </template>
      <view class="no-login">
        <u-button
          text="暂不登录"
          :hairline="false"
          shape="circle"
          color="#000000"
          throttleTime="2000"
          @click="toHome"
        ></u-button>
      </view>
    </view>
    <view class="read-text">
      <view style="display: flex; align-items: center">
        <u-checkbox-group
          v-model="checked"
          shape="circle"
          :size="12"
          activeColor="#428d38"
          @change="checkedChange"
        >
          <u-checkbox name="agreement"></u-checkbox>
        </u-checkbox-group>
        <text style="color: #999">我已阅读并同意</text>
        <text @click="agreementUrl(1)">《本维美用户注册协议》</text>
        <text>和</text>
      </view>
      <text @click="agreementUrl(2)">《本维美隐私政策》</text>
    </view>
  </view>
</template>

<script>
import loginApi from "@/api/login";
import { setToken } from "@/utils/auth";

export default {
  name: "Login",
  data() {
    return {
      checked: [],
      codeUserId: null, // 二维码内用户id
    };
  },
  async onLoad(options) {
    if (options.codeUserId) {
      this.codeUserId = options.codeUserId;
    }
  },
  async onShow() {},
  onReady() {},
  methods: {
	agreementUrl(row){
		uni.navigateTo({
			url:`/pages/agreement?type=${row}`
		})
	},
    checkedChange(e) {},
    getPhoneNumberBefore() {
      if (this.checked.length <= 0) {
        uni.showToast({
          icon: "none",
          title: "请先阅读并勾选协议",
        });
        return;
      }
    },
    async getPhoneNumber(e) {
      if (e.detail.errMsg != "getPhoneNumber:ok") {
        uni.showToast({
          icon: "none",
          title: "授权失败",
        });
        return;
      } else {
        uni.showLoading({
          title: "加载中",
        });
        const loginRes = await uni.login();
        let params = {
          code: loginRes[1].code,
          phoneCode: e.detail.code,
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          promotionId: this.codeUserId,
        };
        loginApi.loginOpenid(params).then((res) => {
          if (res.code == 200) {
            uni.hideLoading();
            setToken(res.token);
            uni.setStorageSync("sessionKey", res.sessionKey);
            if (res.nikeName != "" && res.avatar != "") {
              let userInfo = {
                avatar: res.avatar,
                nickName: res.nikeName,
                userId: res.userId,
                flag: res.flag, // 是否绑定过上级
                parentNickName: res.parentNickName, // 上级的用户名
              };
              uni.setStorageSync("userInfo", userInfo);
              if (!this.codeUserId) {
                uni.navigateBack();
              } else {
                uni.switchTab({
                  url: "/pages/index2",
                });
              }
            } else {
              uni.redirectTo({
                url: "/subPages/mine/userInfo",
              });
            }
          } else {
            uni.showToast({
              icon: "none",
              title: "登录失败",
            });
          }
        });
      }
    },
    toHome() {
      uni.switchTab({
        url: "/pages/index2",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: #fff;

  .logo {
    width: 300rpx;
    height: 300rpx;
    border-radius: 20px;
    text-align: center;
    line-height: 300rpx;
    margin: 0 auto 250rpx;
  }

  .btn {
    width: 484rpx;
    margin: 0 0 40rpx;
  }

  .no-login {
    margin: 20rpx 0 0;
  }

  .read-text {
    font-size: 24rpx;

    ::v-deep .u-checkbox__icon-wrap {
      margin-right: 2px;
    }
  }
}
</style>
